<template>
  <div class="app-container">
    <el-steps :active="3" style="margin-top: 30px">
      <el-step title="添加课程信息" icon="el-icon-edit"></el-step>
      <el-step title="添加课程大纲信息" icon="el-icon-upload"></el-step>
      <el-step title="发布课程" icon="el-icon-picture"></el-step>
    </el-steps>

    <div style="width: 1000px;height: 270px;background-color: #eeeeee;margin-left: 140px;margin-top: 50px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <img :src="overShow.cover" height="270px">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <p style="font-size: 20px">{{ overShow.title }}</p>
            <p>共{{ overShow.lessonNum }}课时</p>
            <p>所属分类：{{ overShow.level1 }}——{{ overShow.level2 }}</p>
            <p>课程讲师：{{ overShow.teachName }}</p>
            <p style="font-size: 30px;color: red">￥{{ overShow.price }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-button type="primary" plain style="margin-left: 150px" @click="prev">返回修改</el-button>
    <el-button type="primary" style="margin-top: 90px;" @click="next">发布课程</el-button>
  </div>

</template>


<script>
import {changeStatus, showOver} from "@/api/course";

export default {
  name: "over",
  data() {
    return {
      cId: '',
      overShow: {},
    }
  },
  created() {
    this.cId=this.$route.query.cId
    console.log(this.cId)
    this.getInfo();
  },
  methods: {
    next(){
      changeStatus(this.cId).then(res=>{

        this.$message.success("发布成功")
        this.$router.push({path:"/course/save"})
      })
    },
    prev(){
      this.$router.push({path:"/course/chapter",query:{cId:this.cId}})
    },
    getInfo() {
      showOver(this.cId).then(res => {

        console.log(res.data)
        this.overShow = res.data;
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
